<template>
    <ui-main :title="$route.name">
        <template v-slot:topTitle>
            <el-button size="mini" @click="toggleEdit" class="m-5" type="primary">切换编辑模式</el-button>
            <el-button size="mini" @click="toggleData" class="m-5" type="primary">切换数据</el-button>
            <el-button size="mini" @click="add" class="m-5" type="primary">添加</el-button>
        </template>
        <ui-split-screen left="800">
            <!--左布局-->
            <div slot="left">
                <div class="ui flex h-100p column">
                    <div class="p-20">
                        <ui-table-filter v-model="tableData5" :sel-options="[{ value: 'name', label: '名称' },{ value: 'id', label: '艾迪' }]"></ui-table-filter>
                    </div>
                    <div class="item one">
                        <div class="p-l-20 p-r-20 h-100p">
                            <!--<el-table border :data="tableData5" height="200" v-adaptive-table>
                                <el-table-column fixed prop="id" label="序号" width="100" align="center" header-align="center">
                                    <template slot-scope="scope">{{ scope.row.id + 1 }}</template>
                                </el-table-column>
                                <el-table-column prop="date" label="日期" width="150"></el-table-column>
                                <el-table-column prop="name" label="姓名" width="120">
                                    <template slot-scope="scope">
                                        <div class="pos-r">
                                            <el-popover :ref="'popover-' + scope.row.id" placement="top" width="260" trigger="hover">
                                                <p><img width="235"
                                                    src="http://ws3.sinaimg.cn/large/007EGrmWly1g68somqhpug30bj07mb29.gif"
                                                    alt=""> {{ scope.row.id }} slot的方式确实可以替代ref解决点击“删除”按钮弹出popover问题。但现在用这种方式还是存在popover内的“确定”和“取消”这两个按钮点击后改成visible2这个值为false没法关闭popover的问题。就是popover没有消失。不知道是不是我哪里用不对。通过v-model来控制显示和消失，我是参考官网文档popover里面的样例做的
                                                </p>
                                                <el-button type="primary" slot="reference" size="mini">hover</el-button>
                                            </el-popover>
                                        </div>
                                    </template>
                                </el-table-column>
                                <el-table-column prop="progress" label="完成度" width="120">
                                    <template slot-scope="scope">
                                        <el-progress :percentage="scope.row.progress"></el-progress>
                                    </template>
                                </el-table-column>
                                <el-table-column prop="province" label="省份" width="120"></el-table-column>
                                <el-table-column prop="city" label="市区" width="120"></el-table-column>
                                <el-table-column prop="address" label="地址" width="300"></el-table-column>
                                <el-table-column prop="zip" label="邮编" width="120"></el-table-column>
                                <el-table-column label="操作" width="190px" fixed="right">
                                    &lt;!&ndash; eslint-disable-next-line&ndash;&gt;
                                    <template slot="header" slot-scope="scope">
                                        操作
                                        <span class="t-blue">(共:{{ tableData5.length }}条数据)</span>
                                    </template>
                                    <template slot-scope="scope">
                                        <ui-buttons :key="scope.row.editable">
                                            <ui-tab-btn name="停用" v-show="scope.row.editable"></ui-tab-btn>
                                            <ui-tab-btn name="启用" v-show="!scope.row.editable"></ui-tab-btn>
                                            <ui-tab-btn name="提交"></ui-tab-btn>
                                            <ui-tab-btn name="导出"></ui-tab-btn>
                                            <ui-tab-btn name="查看"></ui-tab-btn>
                                            <ui-tab-btn name="编辑" v-show="scope.row.editable"></ui-tab-btn>
                                            <ui-tab-btn name="删除" v-show="scope.row.editable"></ui-tab-btn>
                                            <ui-tab-btn name="审核" v-show="scope.row.editable"></ui-tab-btn>
                                        </ui-buttons>
                                    </template>
                                </el-table-column>
                            </el-table>-->
                            <el-table ref="v-virtual-table" :summary-method="getSummaries"
                                show-summary :data="vData" v-virtual-table:tableData5 :height="h" v-adaptive-table>
                                <el-table-column fixed prop="id" label="序号" width="150" align="center" header-align="center">
                                    <template slot-scope="scope">{{ scope.row.itemIndex }} -- {{ scope.row.id }}</template>
                                </el-table-column>
                                <el-table-column prop="date" label="日期" width="150"></el-table-column>
                                <el-table-column prop="name" label="姓名" width="120">
                                    <!--<template slot-scope="scope">
                                        <div class="pos-r">
                                            <el-popover :ref="'popover-' + scope.row.id" placement="top" width="260" trigger="hover">
                                                <p><img width="235"
                                                    src="http://ws3.sinaimg.cn/large/007EGrmWly1g68somqhpug30bj07mb29.gif"
                                                    alt=""> {{ scope.row.id }} slot的方式确实可以替代ref解决点击“删除”按钮弹出popover问题。但现在用这种方式还是存在popover内的“确定”和“取消”这两个按钮点击后改成visible2这个值为false没法关闭popover的问题。就是popover没有消失。不知道是不是我哪里用不对。通过v-model来控制显示和消失，我是参考官网文档popover里面的样例做的
                                                </p>
                                                <el-button type="primary" slot="reference" size="mini">hover</el-button>
                                            </el-popover>
                                        </div>
                                    </template>-->
                                </el-table-column>
                                <el-table-column prop="progress" label="完成度" width="120">
                                    <template slot-scope="scope">
                                        <el-progress :percentage="scope.row.progress"></el-progress>
                                    </template>
                                </el-table-column>
                                <el-table-column prop="province" label="省份" width="120"></el-table-column>
                                <el-table-column prop="city" label="市区" width="120"></el-table-column>
                                <el-table-column prop="address" label="地址" width="300"></el-table-column>
                                <el-table-column prop="zip" label="邮编" width="120"></el-table-column>
                                <el-table-column label="操作" width="190px" fixed="right">
                                    <!-- eslint-disable-next-line-->
                                    <template slot="header" slot-scope="scope">
                                        操作
                                        <span class="t-blue">(共:{{ tableData5.length }}条数据)</span>
                                    </template>
                                    <template slot-scope="scope">
                                        <ui-buttons :key="scope.row.editable">
                                            <ui-tab-btn name="停用" v-show="scope.row.editable"></ui-tab-btn>
                                            <ui-tab-btn name="启用" v-show="!scope.row.editable"></ui-tab-btn>
                                            <ui-tab-btn name="提交"></ui-tab-btn>
                                            <ui-tab-btn name="导出"></ui-tab-btn>
                                            <ui-tab-btn name="查看"></ui-tab-btn>
                                            <ui-tab-btn name="编辑" v-show="scope.row.editable"></ui-tab-btn>
                                            <ui-tab-btn name="删除" v-show="scope.row.editable"></ui-tab-btn>
                                            <ui-tab-btn name="审核" v-show="scope.row.editable"></ui-tab-btn>
                                        </ui-buttons>
                                    </template>
                                </el-table-column>
                            </el-table>

                        </div>
                    </div>
                    <!--<div class="" style="margin:0 20px; height:30px; line-height:30px; background:#eee;">
                        合计： 145万元
                    </div>-->
                </div>
            </div>
            <!--右布局-->
            <div slot="right">
                <ui-load-md class="p-l-20 p-r-20" file="./virtualTable.md"></ui-load-md>
            </div>
        </ui-split-screen>
    </ui-main>
</template>
<script>
    export default {
        data() {
            return {
                tableData1: [],
                tableData5: [],
                vData: [],
                visible: false,
                flag: false,
                num: 0,
                h: 100,
                searchText: ''
            };
        },
        mounted() {
            setTimeout(() => {
                for (let i = 0, len = 10000; i < len; i++) {
                    this.tableData5.push({
                        id: i.toString(),
                        date: '2016-05-03',
                        name: '王小虎' + i,
                        province: '上海',
                        city: '普陀区',
                        address: '上海市普陀区金沙江路 1518 弄',
                        zip: 200333,
                        editable: true,
                        progress: Math.round(Math.random() * 10) * 10,
                        visible: false,
                    })
                }
                for (let i = 0, len = 3; i < len; i++) {
                    this.tableData1.push({
                        id: i.toString(),
                        date: '2016-05-03',
                        name: '王小虎' + i,
                        province: '上海',
                        city: '普陀区',
                        address: '上海市普陀区金沙江路 1518 弄',
                        zip: 200333,
                        editable: true,
                        progress: Math.round(Math.random() * 10) * 10,
                        visible: false,
                    })
                }
            }, 100)
        },
        methods: {
            handleNodeClick(data) {
                this.log(data);
            },
            showRowDetail(data) {
                // console.log(data);
            },
            toggleEdit() {
                this.tableData5[0].editable = !this.tableData5[0].editable
                this.tableData5[3].editable = !this.tableData5[3].editable
            },
            toggleData() {
                let cache = []
                setTimeout(() => {
                    if (!this.flag) {
                        for (let i = 0, len = 1000; i < len; i++) {
                            cache.push({
                                id: i + 'x',
                                date: '2019-05-03',
                                name: '老王' + i,
                                province: '广州',
                                city: '普陀区',
                                address: '广州市普陀区金沙江路 1518 弄',
                                zip: 200333,
                                editable: true,
                                progress: Math.round(Math.random() * 10) * 10,
                                visible: false,
                            })
                        }
                    }else{
                        for (let i = 0, len = 20; i < len; i++) {
                            cache.push({
                                id: i,
                                date: '2016-05-03',
                                name: '王大妈' + i,
                                province: '上海',
                                city: '普陀区',
                                address: '上海市普陀区金沙江路 1518 弄',
                                zip: 200333,
                                editable: true,
                                progress: Math.round(Math.random() * 10) * 10,
                                visible: false
                            })
                        }
                    }
                    this.flag = !this.flag
                    this.tableData5 = cache
                }, 100)
            },
            add() {
                this.tableData5.unshift({
                    id: 'add' + this.num++,
                    date: '2016-05-03',
                    name: '王小虎' + this.num++,
                    province: '上海',
                    city: '普陀区',
                    address: '上海市普陀区金沙江路 1518 弄',
                    zip: 200333,
                    editable: true,
                    progress: Math.round(Math.random() * 10) * 10,
                    visible: false
                })
            },
            pClose(id) {
                this.$refs[`popover-` + id].doClose()
            },
            pOpen(id) {
                this.$refs[`popover-` + id].doShow()
            },
            getSummaries(param) {
                let { columns, data } = param;
                const sums = [];
                columns.forEach((column, index) => {
                    if (index === 0) {
                        sums[index] = '总价';
                        return;
                    }
                    if (index === 1) {
                        sums[index] = '21423423';
                        return;
                    }
                    /*const values = data.map(item => Number(item[column.property]));
                    if (!values.every(value => isNaN(value))) {
                        sums[index] = values.reduce((prev, curr) => {
                            const value = Number(curr);
                            if (!isNaN(value)) {
                                return prev + curr;
                            }else{
                                return prev;
                            }
                        }, 0);
                        sums[index] += ' 元';
                    }else{
                        sums[index] = 'N/A';
                    }*/
                });

                return sums;
            }
        }
    }
</script>
